.comprehensive-data-panel {
  display: flex;
  align-items: center;
  position: relative;
  width: 1939px; // 设置基准宽度
  height: 101px;
  
  // 响应式适配 - 基准分辨率为3952x1248
  @media screen and (max-width: 1920px) {
    transform: scale(0.4862); // 1920/3952 ≈ 0.4862
    transform-origin: top left;
  }
  
  @media screen and (max-width: 1080px) {
    transform: scale(0.2733); // 1080/3952 ≈ 0.2733
    transform-origin: top left;
  }
  
  @media screen and (min-width: 5120px) {
    transform: scale(1.2955); // 5120/3952 ≈ 1.2955
    transform-origin: top left;
  }

  // 左侧面板样式
  .left-panel {
    width: 581px;
    height: 101px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0 39px 0 91px;
    position: relative;

    .left-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-right: 52px;

      &:last-child {
        margin-right: 0;
      }

      .item-icon {
        width: 48px;
        height: 49px;
        margin-right: 9px;
        object-fit: contain;
      }

      .item-text {
        font-style: normal;
        text-align: left;
        white-space: nowrap;
        user-select: none;
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }

  // 中间面板样式
  .middle-panel {
    width: 777px;
    height: 102px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0 160px;
    position: relative;
    transform: translateX(-46px);

    .middle-stat {
      display: flex;
      align-items: center;

      &:last-child {
        margin-right: 0;
      }

      .triangle-decoration {
        width: 20px;
        height: 20px;
        background: linear-gradient(180deg, #00FFF1 0%, #008BFF 100%);
        clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
        margin-right: 12px;
        flex-shrink: 0;
        border-radius: 5px;

        &--right {
          clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
          margin-right: 0;
          margin-left: 12px;
        }
      }

      .stat-content {
        display: flex;

        .stat-title {
          text-align: left;
          font-style: normal;
          margin-bottom: 2px;
          white-space: nowrap;
        }

        .stat-value {
          margin-left: 24px;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
        }
      }
    }
  }

  // 右侧面板样式
  .right-panel {
    width: 581px;
    height: 101px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0 91px 0 115px;
    position: relative;
    transform: translateX(-92px);
    .right-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-right: 53px;

      &:last-child {
        margin-right: 0;
      }

      .item-icon {
        width: 48px;
        height: 48px;
        margin-right: 9px;
        object-fit: contain;
      }

      .item-text {
        font-style: normal;
        text-align: left;
        white-space: nowrap;
        user-select: none;
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }

  // 主题样式
  &.theme-light {
    // 浅色主题特定样式
    background-color: rgba(255, 255, 255, 0.1);
  }

  &.theme-dark {
    // 深色主题样式（默认）
    .left-panel, .middle-panel, .right-panel {
      .item-text {
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
      }
      
      .stat-title, .stat-value {
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
      }
    }
  }

  // 旧的响应式设计已被整体缩放替代

  // 动画效果
  .left-item, .right-item {
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
    }
  }

  .triangle-decoration {
    transition: all 0.3s ease;
    animation: trianglePulse 2s infinite ease-in-out;
  }

  @keyframes trianglePulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
} 